import React from "react";
import CreateContextSon from "./CreateContextSon.jsx";

import ctx from "./Context.js";

export default function UseContext() {
  const [user, setUser] = React.useState({
    name: "lisi",
    age: 3,
  });

  const grow = (i) => {
    setTimeout( () => {
      setUser({
        ...user,
        age:i
      })
    },1000)
  }

  return (
    <div>
      <ctx.Consumer >
        { (ctx) => {
          return (
            <div> name:{ctx.name},age:{ctx.age}</div>
          )
        }}
      </ctx.Consumer>

      <ctx.Provider value={{user,grow}}>
        {user.name}|{user.age}

        <CreateContextSon></CreateContextSon>
      </ctx.Provider>
    </div>
  )
}
